package io.shuttle.mbe_app.ui.page

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.pulltorefresh.rememberPullToRefreshState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.delay

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HomePage() {
    var moreVertState by remember { mutableStateOf(false) }
    val pullToRefreshState = rememberPullToRefreshState()

    var link by remember { mutableStateOf("file:///android_asset/bare/index.html") }


    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("Mobile Browser Extension")
                },
                actions = {
                    Box(modifier = Modifier.padding(16.dp)) {
                        IconButton(onClick = {
                            moreVertState = !moreVertState
                        }) {
                            Icon(
                                imageVector = Icons.Default.MoreVert,
                                contentDescription = "More options"
                            )
                        }
                        DropdownMenu(
                            expanded = moreVertState,
                            onDismissRequest = { moreVertState = false }) {
                            DropdownMenuItem(text = { Text("bare") }, onClick = {
                                link = "file:///android_asset/bare/index.html"
                                moreVertState = false
                            })
                            DropdownMenuItem(text = { Text("trtcv5") }, onClick = {
                                link = "file:///android_asset/trtcv5/index.html"
                                moreVertState = false
                            })
                        }
                    }
                },

                )
        }
    ) { padding ->
        Box(
            modifier = Modifier
                .padding(padding)
                .fillMaxSize()
        ) {
            MBECoreTestPage(link, pullToRefreshState)
//            PullToRefreshContainer(
//                state = pullToRefreshState,
//                modifier = Modifier.align(Alignment.TopCenter)
//            )
        }
    }
}